<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Dashboard Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <style type="text/css">
        /* Chart.js */
        @-webkit-keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
        @keyframes chartjs-render-animation {
            from {
                opacity: 0.99
            }
            to {
                opacity: 1
            }
        }
    </style>
</head>

<body>
<div th:replace="~{commons/commons::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <div th:replace="~{commons/commons::sidebar(active='listStudent.html')}"></div>
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <tr>
                        <th colspan="3" style="color: #1e7e34">添加学生</th>
                    </tr>
                    <tr>
                        <td colspan="3" height="20px"></td>
                    </tr>
                    <tr>
                        <td>学生姓名:</td>
                        <td>
                            <input name="name" id="stuName" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>学生身份证号码:</td>
                        <td>
                            <input name="idCard" id="idCard" onblur="idCard()" type="text"/>
                        </td>
                    </tr>
                    <tr>
                        <td>年龄:</td>
                        <td>
                            <input type="text" id="age" onblur="stuAge()" name="age"/>
                        </td>
                    </tr>
                    <tr>
                        <td>住址:</td>
                        <td>
                            <input type="text" id="address" name="address"/>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" height="30px"></td>
                    </tr>
                    <tr>
                        <td align="right">
                            <input type="button" onclick="addStu()" value="提交" class="button"/>
                        </td>
                        <td>
                            <input type="button" onclick="chongzhi()" value="重置" class="button"/>
                        </td>
                    </tr>
                </table>
            </div>
        </main>
    </div>
</div>
<script type="text/javascript">
    <!--身份证格式验证-->
    function idCard() {
        var idCardReg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        var idCard = $("#idCard").val();
        if (!(idCardReg.test(idCard))){
            alert("学生身份证格式不正确！");
            $("#idCard").val("");
        }
    }
    //年龄格式验证
    function stuAge() {
        var ageReg = /^[1-9]\d*$/;
        var age = $("#age").val();
        if (!(ageReg.test(age))){
            alert("年龄格式不正确！");
            $("#age").val("");
        }
    }
    function addStu(){
        var stuName = $("#stuName").val();
        var idCard = $("#idCard").val();
        var age = $("#age").val();
        var address = $("#address").val();
        if(stuName == "" || idCard == "" || age == "" || address == "") {
            alert("请将信息填写完整");
        }else {
            $.ajax({
                url: "http://localhost:8080/admin/addStudent",
                type: "POST",
                data: {"stuName": stuName, "idCard": idCard,  "age": age, "address": address},
                datatype: 'json',
                success: function (data) {
                    if (data.code == "0") {
                        window.location.href = "http://localhost:8080/admin/listStudent";
                    } else if (data.code == "5") {
                        alert("学生信息【"+stuName+","+idCard+","+age+","+address+"】存在,数据成功覆盖");
                        window.location.href = "http://localhost:8080/admin/listStudent";
                    }else {
                        alert("异常");
                    }
                }
            });
        }
    }
    //重置 清空输入框的数据
    function chongzhi() {
        $("#idCard").val("")
        $("#stuName").val("");
        $("#age").val("");
        $("#address").val("");
    }
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"/>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}"></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}"></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script>
<!-- Icons -->
<script type="text/javascript" th:src="@{/js/feather.min.js}"></script>
<script>
    feather.replace()
</script>
<!-- Graphs -->
<script type="text/javascript" th:src="@{/js/Chart.min.js}"></script>
</body>
</html>